import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

interface MarkdownRendererProps {
    content: string;
    className?: string;
}

const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, className }) => {
    return (
        <div className={`prose prose-invert prose-sm sm:prose-base max-w-none break-words ${className}`}>
            <ReactMarkdown
                remarkPlugins={[remarkGfm]}
                components={{
                    h1: ({node, ...props}) => <h1 className="text-2xl font-bold my-3 text-cyan-300" {...props} />,
                    h2: ({node, ...props}) => <h2 className="text-xl font-bold my-2 text-cyan-400" {...props} />,
                    h3: ({node, ...props}) => <h3 className="text-lg font-semibold my-2 text-cyan-500" {...props} />,
                    p: ({node, ...props}) => <p className="mb-3 leading-relaxed" {...props} />,
                    ul: ({node, ...props}) => <ul className="list-disc list-outside my-3 pl-6" {...props} />,
                    ol: ({node, ...props}) => <ol className="list-decimal list-outside my-3 pl-6" {...props} />,
                    li: ({node, ...props}) => <li className="mb-2" {...props} />,
                    blockquote: ({node, ...props}) => <blockquote className="border-l-4 border-gray-500 pl-4 italic text-gray-400 my-2" {...props} />,
                    a: ({node, ...props}) => <a className="text-blue-400 hover:underline" target="_blank" rel="noopener noreferrer" {...props} />,
                    code: ({node, className, children, ...props}) => {
                        // The 'inline' prop is deprecated in newer versions of react-markdown.
                        // A common way to distinguish code blocks from inline code is to check
                        // for the 'language-xx' className, which is added to fenced code blocks.
                        const match = /language-(\w+)/.exec(className || '');
                        // It is a code block if a language is specified.
                        // The original logic of returning a <pre> here was incorrect, as it
                        // would be nested inside the parent <pre> rendered by the 'pre' component handler.
                        return match ?
                          <code className={'font-mono text-pink-300'} {...props}>{children}</code> :
                          <code className="bg-gray-700 text-pink-400 px-1.5 py-0.5 rounded text-sm font-mono" {...props}>{children}</code>;
                    },
                    pre: ({node, ...props}) => <pre className="bg-gray-900/70 p-2 rounded overflow-x-auto my-2 text-sm" {...props} />,
                    strong: ({node, ...props}) => <strong className="font-bold text-yellow-300" {...props} />,
                    em: ({node, ...props}) => <em className="italic text-teal-300" {...props} />,
                    hr: ({node, ...props}) => <hr className="border-gray-600 my-4" {...props} />,
                    table: ({node, ...props}) => <table className="table-auto w-full my-2 text-left" {...props} />,
                    thead: ({node, ...props}) => <thead className="bg-gray-700" {...props} />,
                    th: ({node, ...props}) => <th className="border border-gray-600 px-2 py-1 font-semibold" {...props} />,
                    td: ({node, ...props}) => <td className="border border-gray-600 px-2 py-1" {...props} />,
                }}
            >
                {content}
            </ReactMarkdown>
        </div>
    );
};

export default MarkdownRenderer;